<template>
    <div class="alarm-dialog" :class="{'warning': isShow }" v-show="isShow">
        <div class="title">
            <span style="font-size:16px;color:red">实  时  预  警</span>
            <i class="el-icon-close close" @click="close"></i>
        </div>
        <div class="content" v-show="rfidRecord.type == 0">
            <h3>{{rfidRecord.orgName}}</h3>
            <h4>预警设备:{{rfidRecord.equipmentName}}</h4>
            <h4>标签卡号:{{rfidRecord.rfidCardNo}}</h4>
            <h4>车主:{{rfidRecord.ownerName}}</h4>
        </div>
        <div class="content" v-show="rfidRecord.type == 1">
            <h3>{{rfidRecord.orgName}}</h3>
            <h4>电器监测设备:{{rfidRecord.equipmentName}}</h4>
            <h3 style="color:red;padding:10px 0">{{formatAlarmType(rfidRecord.alarmName)}}</h3>
        </div>
        <div class="content" v-show="rfidRecord.type == 2">
            <h3>{{rfidRecord.orgName}}</h3>
            <h4>预警设备:{{rfidRecord.equipmentName}}</h4>
            <h3 style="color:red;padding:10px 0">{{formatAlarmType(rfidRecord.alarmName)}}</h3>
        </div>
    </div>
</template>

<script>
/**
 * 实时预警提示框
 */
import { mapGetters,mapState } from 'vuex'
export default {
    data() {
        return {
            isShow: false,
            rfidRecord: {},
            orgInfo:{},
            audioPlay:null
        }
    },
    computed:{
        ...mapGetters(['cameraAlarmType']),
        ...mapState('data', ['globalAlarmType'])
    },
    methods: {
        show(message) {
            try {
                console.log(message)
                this.rfidRecord = JSON.parse(message)
                console.log(this.rfidRecord)
                if(this.rfidRecord.type == 2){
                    // this.isShow = true
                    let {longitude,latitude} = this.rfidRecord
                    if(longitude&&latitude){
                        this.$root.Bus.$emit('global-alarm-event',longitude,latitude)
                    }
                    let type = this.rfidRecord.alarmName
                    let index = this.globalAlarmType.findIndex(item=>{
                        return item == type
                    })
                    console.log(type)
                    console.log(this.globalAlarmType)
                    if(index>-1){
                        this.isShow = true
                        this.playVoice()
                    }
                }else{
                    this.isShow = true
                    this.playVoice()
                    let {longitude,latitude} = this.rfidRecord
                    if(longitude&&latitude){
                        this.$root.Bus.$emit('global-alarm-event',longitude,latitude)
                    }
                }
                
            } catch (error) {
                console.log(error)
            }
        },
        formatAlarmType(type){
            let obj =this.cameraAlarmType.find(item=>{
                return type == item.value
            })
            return obj?obj.label:''
        },
        close(){
            this.isShow = false
            this.audioPlay = null
            // this.audioPlay.pause()
        },
        playVoice() {
            //采集成功，播放声音
            this.audioPlay = new Audio()
            this.audioPlay.src = './mp3/alarm.mp3'
            this.audioPlay && this.audioPlay.play()

            this.audioPlay.addEventListener("ended",()=>{
                this.audioPlay.play()
            })
        }
    }
}
</script>

<style scoped lang="scss">
.alarm-dialog {
    position: fixed;
    margin: 0 auto;
    width: 400px;
    height: 200px;
    top: 30%;
    left: 50%;
    margin-left: -200px;
    background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5));
    border-radius: 5px;
    color: #fff;
    z-index: 11;
    .title {
        display: flex;
        align-items: center;
        height: 50px;
        justify-content: center;
        padding: 0 10px;
        position: relative;
        .close {
            position: absolute;
            right: 10px;
        }
    }
    .content{
        padding: 20px;
        text-align: center;
    }
}
.warning {
    animation: glow 800ms ease-out infinite alternate;
}
@keyframes glow {
    0% {
        border-color: #ec8585;
        box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1), 0 1px 0 #ec8585;
    }
    100% {
        border-color: #ff0000;
        box-shadow: 0 2px 10px rgba(249, 0, 0, 0.6), inset 0 5px 20px rgba(249, 2, 2, 0.4), 0 1px 0 #ff0000;
    }
}
</style>
